{% extends "base.html" %}
{% block title %}Users{% endblock title %}
{% block ngapp %}BaseModule{% endblock ngapp %}
{% block content_class %}class="settings-users data-rows"{% endblock content_class %}
{% block breadcrumb %}
    {% include "settings/_topbar.html" %}
{% endblock breadcrumb %}
{% block main_content_class %}center{% endblock main_content_class %}
{% block content %}
<form method="post" action="{% url 'view_users' %}">
<div class="settings__content">

<ul class="settings-list-form">
    {{ form.as_ul }}

<li class='buttons'>
    {% csrf_token %}
    <input type="submit" class='button' value="Invite" />
    
</li>
</ul>

</div><!-- profile content -->

</form>

    
{% if active_users|length > 0 %}
<h4>Active users </h4>

<table class='settingsusers-table'>
    <thead>
        <th class='email'>Email</th>
        
        <th>Date joined</th>
        <th></th>

    </thead>
    <tbody>
        {% for user in active_users %}
        <tr >
            <td>{{ user.email }}</td>
            <td>{{user.date_joined}}</td>
            <td class='actions'>
                
                {% if user != request.user %}
                    <a class='button red' href="{% url 'users_revoke_access' user_id=user.id|to_str %}">Revoke access</a>
                {% endif %}
            </td>
        </tr>
        {% endfor %}
    </tbody>
</table>
{% endif %}

{% if pending.clone.count > 0 %}
<h4>Pending invitations</h4>
<table class='settingsusers-table'>
    <thead>
        <th class='email'>Email</th>
        <th>Invite URL</th>
        <th >Sent</th>
        <th></th>
    </thead>
    <tbody>
        {% for p in pending %}
        <tr id="row-{{ p|mongo_id }}">
            <td>{{ p.email }}</td>
            <td>
                 <a href="{% url 'users_confirm_invite' invitation_code=p.invitation_code %}">URL</a></td>
            <td>{{ p.sent|datetime_local:request.timezone }}</td>
            <td class='settings-column' >
                    <a title='Delete' class='delete_row button delete' data-rowid="{{ p|mongo_id }}" href="#" data-icon="M" ></a>
            </td>
        </tr>
        <div class="delete-row" id="delete-row-{{ p|mongo_id }}">
        <p>Are you sure you want to delete this invitation ?</p>
        <ul>
            <li><a href="{% url 'users_remove_pending' invitation_id=p|mongo_id %}" class="button delete">Delete</a></li>
            <li><a data-rowid="{{ p|mongo_id }}" href="" class="button cancel cancel_delete">Cancel</a></li>
        </ul>
        </div>
        {% endfor %}
    </tbody>
</table>
{% endif %}

{% endblock content %}
{% block js %}
    <script type="text/javascript" src='{{ STATIC_URL }}js/delete.row.js'></script>
{% endblock js %}